<template>
  <div class="app-container calendar-list-container">
    <el-container  v-loading="loading">
      <el-aside class="tree-border">
        <div >
          <el-tree
            class="filter-tree"
            :data="treeData.data"
            :props="treeData.defaultProps"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            ref="userDepTtree">
          </el-tree>
        </div>
      </el-aside>
      <el-main>
        <div class="filter-container">
          <el-form :inline="true" :model="searchData" class="demo-form-inline">
            <el-form-item label="用户名称">
              <el-input size="mini" v-model="searchData.name" placeholder="账号/姓名/手机号"></el-input>
            </el-form-item>
            <el-form-item label="注册开始时间">
              <el-date-picker type="datetime" placeholder="选择日期" v-model="searchData.startTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="注册结束">
              <el-date-picker type="datetime" placeholder="选择日期" v-model="searchData.endTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-form>
          <el-row :gutter="20" style="padding-bottom: 20px">
            <el-col :span="1.5"><el-button size="mini" type="primary" @click="handleAdd" icon="el-icon-circle-plus">新增</el-button></el-col>
            <el-col :span="1.5"><el-button size="mini" type="primary" @click="handleUpdate" :disabled="multipleSelection.length!=1" icon="el-icon-edit">修改</el-button></el-col>
            <el-col :span="1.5"><el-button size="mini" type="primary" @click="handleChangeStatus(1)" :disabled="multipleSelection.length<1" icon="el-icon-circle-check-outline">启用</el-button></el-col>
            <el-col :span="1.5"><el-button size="mini" type="primary" @click="handleChangeStatus(0)" :disabled="multipleSelection.length<1" icon="el-icon-circle-close-outline">停用</el-button></el-col>
            <el-col :span="1.5"><el-button size="mini" type="primary" @click="handleDel" :disabled="multipleSelection.length<1" icon="el-icon-delete">删除</el-button></el-col>
            <el-col :span="1.5"><el-button size="mini" type="primary" @click="handleAuth" :disabled="multipleSelection.length!=1" icon="el-icon-zoom-in">角色分配</el-button></el-col>
            <el-col :span="1.5" :offset="10"><el-button  size="mini" type="primary" @click="onSearch" icon="el-icon-search">查询</el-button></el-col>
          </el-row >
          <el-table
            :data="tableParams.tableData"
            border
            style="width: 100%;"
            @selection-change="handleSelectionChange"
            tooltip-effect="dark"
            >
            <el-table-column
              type="selection"
              fixed="left"
              width="50">
            </el-table-column>
            <el-table-column
              prop="id"
              label="ID"
              fixed="left"
              width="50">
            </el-table-column>
            <el-table-column
              prop="loginname"
              label="账号"
              width="auto">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="auto">
              <template slot-scope="scope">
                <span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="sex"
              label="性别"
              width="auto">
              <template slot-scope="scope">
                <span v-if="scope.row.sex==0">男</span>
                <span v-if="scope.row.sex==1">女</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="roleName"
              label="角色"
              show-overflow-tooltip
              width="auto">
            </el-table-column>
            <el-table-column
              prop="deptName"
              label="部门"
              width="auto">
            </el-table-column>
            <el-table-column
              prop="phone"
              label="电话"
              width="auto">
            </el-table-column>
            <el-table-column
              prop="phone"
              label="电话"
              width="auto">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="160">
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              width="60"
              fixed="right"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.status==0">停用</span>
                <span v-if="scope.row.status==1">启用</span>
              </template>
            </el-table-column>
            <!--<el-table-column label="操作" width="auto">-->
              <!--<template slot-scope="scope">-->
                <!--<el-button type="primary" @click="handleAuth(scope.row.id)" size="mini">授权</el-button>-->
                <!--<el-button type="primary" @click="handleUpdate(scope.row)" size="mini">修改</el-button>-->
                <!--<el-button type="primary" @click="handleDel(scope.row)" size="mini">删除</el-button>-->
              <!--</template>-->
            <!--</el-table-column>-->
          </el-table>

          <div class="foot-pagination" >
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="this.formPage.pagination.pageNumber"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="this.formPage.pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.formPage.pagination.totalRow">
            </el-pagination>
          </div>
        </div>
        <userAdd v-bind:formPage="formPage" ></userAdd>
        <authRole v-bind:authRole="authRole"></authRole>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import {userList,delUser,changeStatus} from '@/api/user/user'
  import  userAdd from './add'
  import  authRole from './authRole'
  import {deptList} from "@/api/dept/dept";
  export default {
    name: "userManager",
    components: {userAdd,authRole},
    data() {
      return {
        loading:false,
        multipleSelection:[],
        searchData: {
          name: null,
          startTime:'',
          endTime:'',
          page:'1',
          size:'10',
        },
        tableParams:{
          tableData:[],
          select:[],
          single:true,
        },
        dialogFormVisible: false,
        authRole:{
             userId:'',
             show:false,
             roleIds:[],
             deptId:null
        },
        formPage:{
          show:false,

          cascader_data:[],
          formData: {
            name: '',
            loginname:'',
            sex:'',
            createTime:'',
            deptName:'',
            roleName:'',
            roleIds:'',
            deptId:'',
            deptIds:[],
            phone:'',
            id: '',
            status: '',
            seq: '',
          },
          pagination:{
            pageNumber:1,
            totalRow:0,
            pageSize:10,
          }
        },
        cache:{
          id:null,
        },
        formLabelWidth: '120px',
        treeData:{
          filterText: '',
          defaultProps: {
            children: 'children',
            label: 'simpleName'
          },
          data:[]
        },
      };
    },
    methods: {
      onSearch() {
        console.log(this.searchData)
        this.getTableData(this.searchData);
      },
      handleAdd(){
        if(this.cache.id!=null){
          this.formPage.formData={
            name: '',
            loginname:'',
            sex:'',
            createTime:'',
            deptName:'',
            roleName:'',
            roleIds:[],
            deptId:'',
            deptIds:[],
            phone:'',
            id: '',
            status: '',
            seq: '',
          }
          this.cache.id=null;
        }
        ;
        this.formPage.show=true;
      },
      handleUpdate(row) {
         if(this.multipleSelection.length>0){
            row=this.multipleSelection[0];
           }
        this.formPage.show=true;
        if(this.cache.id!=row.id||this.cache.id==null){
          for(var p in  this.formPage.formData){//遍历json对象的每个key/value对,p为key
            this.formPage.formData[p]=row[p]
          }
          this.formPage.formData.status+='';
          if(this.formPage.formData.roleIds){
            this.formPage.formData.roleIds=this.formPage.formData.roleIds.split(",");
          }
          else {
            this.formPage.formData.roleIds=[]
          }

          this.cache.id=row.id;
          this.formPage.formData.sex+='';
          console.log(this.treeData.data)
          this.getDeptIds(row.deptId,this.treeData.data)
          // console.log(this.formPage.formData)
        }
      },

      getDeptIds(id,array){
        array.forEach((item,index)=>{
          if(id==item.id){
            // console.log("**")
            // console.log(item)
            this.formPage.formData.pids=item.pids;
            this.formPage.formData.pids.push(item.id);
            console.log(this.formPage.pids==undefined)
          }else {
            // console.log("***")
            if(item.children!=null){
                this.getDeptIds(id,item.children)
            }
          }
        })
      },
      handleAuth(){
        let row=this.multipleSelection[0];
        this.authRole.userId=row.id;
        this.authRole.deptId=row.deptId;
        this.authRole.show=true;
        if(row.roleIds){
          this.authRole.roleIds=row.roleIds.split(",");
        }else {
          this.authRole.roleIds=[];
        }
      },
      handleChangeStatus(type){
        let uids=[];
        if(this.multipleSelection){
          this.multipleSelection.forEach(item=>{
            uids.push(item.id)
          })
        }
        changeStatus({userIds:uids.toString(),type:type}).then(response=>{
          this.$message({
            message: response.data.mesg,
            type: 'success',
            duration: 5 * 1000
          })
          this.onSearch()
        })
      },
      getTableData(params){
        this.loading=true;
        userList(params).then(response => {
          console.log(response)
          this.tableParams.tableData=response.data.data.records;
          this.formPage.pagination.pageSize=response.data.data.size;
          this.formPage.pagination.totalRow=response.data.data.total;
          this.formPage.pagination.pageNumber=response.data.data.current;
          setTimeout(() => {
            this.loading=false;
          }, 500);
        }).catch(error => {
          reject(error)
        });
      },
      getDept(){
        deptList(this.searchData).then(response => {
          let r_list = response.data.data;
          this.treeData.data=r_list;
          this.formPage.cascader_data=r_list
          // console.log(r_list)
          //   r_list = this.resourceTree(r_list,0)
        });
      },
      handleNodeClick(data) {
        this.searchData.deptId=data.id;
        this.onSearch();
        // console.log(this.searchData);
      },
      handleDel(){
        let uids=[];
         if(this.multipleSelection){
           this.multipleSelection.forEach(item=>{
               uids.push(item.id)
           })
         }

        delUser({userIds:uids.toString()}).then(response=>{
          this.$message({
            message: response.data.mesg,
            type: 'success',
            duration: 5 * 1000
          })
          this.onSearch()
        })
      },
      handleSizeChange(val) {
        this.searchData.size=val;
        this.getTableData(this.searchData);
      },
      handleCurrentChange(val) {
        this.searchData.page=val;
        this.getTableData(this.searchData);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        // console.log(this.multipleSelection)
      }
    },
    mounted(){
      console.log(this.searchData);
      this.getTableData(this.searchData);
      this.getDept();
    },
  }
</script>

<style lang="scss" scoped="" type="text/css">
  .tree-border{
    border-right: solid 2px #ebeef5;
  }

  .filter-tree{
    padding-top: 20px;
  }
</style>
